<template>
  <div class="main">
    <div class="search_screen" v-show="search_screnn_on">
      <div class="search_screen_bar">
        <div class="search_screen_exit">
          <div class="search_screen_exit_buttom" @click="screen_off()">X</div>
        </div>
      </div>
      <div class="search_screen_body">
        <div class="search_screen_results">
          <div class="search_screen_result">
            <div class="search_screen_result_col">商品码</div>
            <div class="search_screen_result_col">品牌</div>
            <div class="search_screen_result_col">商品名</div>
            <div class="search_screen_result_col"></div>

          </div>
          <div class="search_screen_result" v-for="(search_item, search_index) in commoditys" :key="search_item.barCode">
            <div class="search_screen_result_col">{{search_item.bar_code}}</div>
            <div class="search_screen_result_col">{{search_item.brand}}</div>
            <div class="search_screen_result_col">{{search_item.name}}</div>
            <div class="search_screen_result_col"><div class="select_commodity" @click="check_com(search_index)">选择</div></div>
          </div>
        </div>
      </div>
      <div class="search_screen_bottom"></div>
    </div>
    <div class="table_head">
      <div class="teable_head_item">
        <div class="table_head_label">承接工厂</div>
        <div class="select_factory">
          <select v-model="selected_factory">
            <option disabled="disabled">请选择</option>
            <option v-for="factory_itesm in factorys" :key="factory_itesm.id">
              {{factory_itesm.id}}-{{factory_itesm.name}}
            </option>
          </select>
        </div>
      </div>
      <div class="teable_head_item">
        <div class="table_head_label">存放仓库</div>
        <div class="select_warehouse">
          <select v-model="select_warehouse">
            <option disabled="disabled">请选择</option>
            <option v-for="warehouse_item in warehouses" :key="warehouse_item.id">
              {{warehouse_item.id}}-{{warehouse_item.address}}
            </option>
          </select>
        </div>
      </div>
      <div class="teable_head_item">
        <div class="table_head_label">支付方式</div>
        <div class="select_warehouse">
          <select v-model="select_pay_method">
            <option disabled="disabled">请选择</option>
            <option>支付宝</option>
            <option>微信</option>
            <option>银行转账</option>
            <option>现金</option>
            <option>其他</option>
          </select>
        </div>
      </div>
    </div>
    <div class="table_items">
      <div>
        <div class="search_commodity">
          <div class="add_line">
            <input placeholder="快速添商品" v-model="search_content"> <button @click="click_search()">搜索</button>
            <button style="margin-left: 50px" @click="create_a_empty_row()">新增一行</button>
          </div>
          <div class="table_items_row">
            <div class="table_items_row_col small_col">序号</div>
            <div class="table_items_row_col" >品牌</div>
            <div class="table_items_row_col big_col">商品名</div>
            <div class="table_items_row_col big_col">商品码</div>
            <div class="table_items_row_col">单价</div>
<!--            <div class="table_items_row_col_reduce"></div>-->
            <div class="table_items_row_col">数量</div>
<!--            <div class="table_items_row_col_add"></div>-->
            <div class="table_items_row_col small_col">包换</div>
            <div class="table_items_row_col small_col">保修</div>
            <div class="table_items_row_col small_col">包退</div>
            <div class="table_items_row_col big_col">销售协议</div>
            <div class="table_items_row_col small_col">限购</div>
            <div class="table_items_row_col ">最高价</div>
            <div class="table_items_row_col">最低价</div>
            <div class="table_items_row_col">推荐零售价</div>
          </div>
          <div class="table_items_rows">
            <div class="table_items_row" v-for="order_item in order_list" :key="order_item.index">
              <div class="table_items_row_col small_col">{{order_item.index}}</div>
              <div class="table_items_row_col" ><input class="order_input" v-model="order_item.brand"></div>
              <div class="table_items_row_col big_col"><input class="order_input" v-model="order_item.commodity"></div>
              <div class="table_items_row_col big_col"><input class="order_input" v-model="order_item.bar_code" @change="change_bar_code(order_item.bar_code)"></div>
              <div class="table_items_row_col"><input class="order_input" v-model="order_item.unit_price"></div>
<!--              <div class="table_items_row_col_reduce" @click="reduceCount(order_item.index)">-</div>-->
              <div class="table_items_row_col"><input class="order_input" v-model="order_item.count" type="number"></div>
<!--              <div class="table_items_row_col_add" @click="addCount(order_item.index)">+</div>-->
              <div class="table_items_row_col small_col"><input class="order_input" v-model="order_item.exchange_days" type="number"></div>
              <div class="table_items_row_col small_col"><input class="order_input" v-model="order_item.repair_days" type="number"></div>
              <div class="table_items_row_col small_col"><input class="order_input" v-model="order_item.return_days" type="number"></div>
<!--              <div class="table_items_row_col big_col" v-if="order_item.explain != null"><input class="order_input" v-model="order_item.explain"></div>-->
<!--              <div class="table_items_row_col big_col" v-else>无</div>-->
              <div class="table_items_row_col big_col" ><input class="order_input" v-model="order_item.explain"></div>
              <div class="table_items_row_col small_col"><input class="order_input" v-model="order_item.limit_buy" type="number"></div>
              <div class="table_items_row_col "><input class="order_input" v-model="order_item.max_price" type="number"></div>
              <div class="table_items_row_col"><input class="order_input" v-model="order_item.min_price" type="number"></div>
              <div class="table_items_row_col"><input class="order_input" v-model="order_item.recommend_price" type="number"></div>
              <div class="table_items_row_col small_col"><div class="order_remove" @click="remove_order_line(order_item.index)">移除</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table_bottom">
      <div class="table_bottom_summary">
        <div class="table_bottom_summary_left">
          <div>总价:{{this.total_price}}</div>
        </div>
        <div class="table_bottom_summary_right">
          <div class="table_bottom_summary_right_top"><input type="checkbox" value="need_print" v-model="need_print">生成同时打印订单</div>
          <div class="table_bottom_summary_right_bottom"><div id="build_order_buttom" @click="create_order()">生成订单</div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import orderService from '../../service/apirla/order'
  export default {
  name: 'CreateOrder',
  data () {
    return {
      order_list: [],
      //   {
      //   index: 1,
      //   brand: '铁三角',
      //   commodity: '铁三角ATH-CK3TW', // 商品名
      //   bar_code: '6900873024377',
      //   unit_price: 869,
      //   count: 1000,
      //   return_days: 30,
      //   exchange_days: 30,
      //   repair_days: 30,
      //   recommend_price: 998, // 推荐零售价
      //   max_price: null,
      //   min_price: 699,
      //   limit_buy: 3,
      //   explain: '索尼会员不准购买'
      // }, {
      //   index: 2,
      //   brand: '铁三角',
      //   commodity: '铁三角ATH-CK3TW', // 商品名
      //   bar_code: '6900873024377',
      //   unit_price: 869,
      //   count: 1000,
      //   return_days: 30,
      //   exchange_days: 30,
      //   repair_days: 30,
      //   recommend_price: 998, // 推荐零售价
      //   max_price: null,
      //   min_price: 699,
      //   limit_buy: 3,
      //   explain: '索尼会员不准购买'
      // }, {
      //   index: 3,
      //   brand: '铁三角',
      //   commodity: '铁三角ATH-CK3TW', // 商品名
      //   bar_code: '6900873024377',
      //   unit_price: 869,
      //   count: 1000,
      //   return_days: 30,
      //   exchange_days: 30,
      //   repair_days: 30,
      //   recommend_price: 998, // 推荐零售价
      //   max_price: null,
      //   min_price: 699,
      //   limit_buy: 3,
      //   explain: '索尼会员不准购买'
      // }, {
      //   index: 4,
      //   brand: '铁三角',
      //   commodity: '铁三角ATH-CK3TW', // 商品名
      //   bar_code: '6900873024377',
      //   unit_price: 869,
      //   count: 1000,
      //   return_days: 30,
      //   exchange_days: 30,
      //   repair_days: 30,
      //   recommend_price: 998, // 推荐零售价
      //   max_price: null,
      //   min_price: 699,
      //   limit_buy: 3,
      //   explain: '索尼会员不准购买'
      // }, {
      //   index: 5,
      //   brand: '铁三角',
      //   commodity: '铁三角ATH-CK3TW', // 商品名
      //   bar_code: '6900873024377',
      //   unit_price: 869,
      //   count: 1000,
      //   return_days: 30,
      //   exchange_days: 30,
      //   repair_days: 30,
      //   recommend_price: 998, // 推荐零售价
      //   max_price: null,
      //   min_price: 699,
      //   limit_buy: 3,
      //   explain: '索尼会员不准购买'
      // }],
      need_print: [],
      selected_factory: '',
      factorys: [],
      select_warehouse: '',
      warehouses: [{
        id: 1,
        address: '广州市天河区五山街道888号'
      }, { id: 2,
        address: '广州市越秀区北京路999号'
      }],
      select_pay_method: '',
      search_screnn_on: false,
      search_content: '',
      commoditys: [],
    }
  },
  async mounted() {
    console.log("进入order")
    let factorys_result = await orderService.getFactory()
    let warehouse_result = await orderService.getWarehouse()
    console.log("factorys:", factorys_result.data)
    console.log("warehouse:", warehouse_result.data)
    this.factorys = factorys_result.data
    this.warehouses = warehouse_result.data


  },
  methods: {
    myIsNumber (value) {
      return typeof value === 'number' && !isNaN(value)
    },
    addCount (index) {
      if (!this.myIsNumber(index)){
        return
      }
      if (index < 1 || index > this.order_list.length) {
        return
      }
      this.order_list[index - 1].count += 1
    },
    reduceCount (index) {
      if (!this.myIsNumber(index)){
        return
      }
      this.order_list[index - 1].count -= 1
    },
    screen_off () {
      this.search_screnn_on = false
    },
    async click_search () {
      this.search_screnn_on = true // 打开搜索弹窗
      if (this.search_content == null || this.search_content == ''){ // 若输入框内的值为空
        this.commoditys = []
        return
      }
      // 发送搜索关键字
      let result = await orderService.search(this.search_content) // 请求后端
      console.log(result.data)
      this.commoditys = result.data


    },
    create_a_empty_row () {
      var i = 1
      if (this.order_list != null) {
        i = this.order_list.length + 1
      } else {
        this.order_list = []
      }
      var new_obj = {
        index: i,
        brand: '',
        commodity: '', // 商品名
        bar_code: '',
        unit_price: null,
        count: 0,
        return_days: 0,
        exchange_days: 0,
        repair_days: 0,
        recommend_price: null, // 推荐零售价
        max_price: null,
        min_price: null,
        limit_buy: null,
        explain: ''
      }
      this.order_list.push(new_obj)
    },
    remove_order_line (index) {
      if (index < 1 || index > this.order_list.length) {
        return
      }
      for (var i = index; i < this.order_list.length; i++) {
        this.order_list[i].index -= 1
      }
      this.order_list.splice(index-1,1)
    },
    check_com (index) {
      // 选择搜索出的快速添加的商品
      var selected_obj = this.commoditys[index]
      var i = 1
      if (this.order_list != null) {
        i = this.order_list.length + 1
      } else {
        this.order_list = []
      }
      for (var var1 = 0 ; var1 < this.order_list.length; var1++){
        if (this.order_list[var1].bar_code == selected_obj.bar_code){
          var msg = '所选择的商品已经在订购单中第' + (var1 + 1) + '行，请勿重复添加'
          alert(msg)
          return
        }
      }
      var new_obj = {
        index: i,
        brand: selected_obj.brand,
        commodity: selected_obj.name, // 商品名
        bar_code: selected_obj.bar_code,
        unit_price: 0,
        count: 0,
        return_days: selected_obj.return_days,
        exchange_days: selected_obj.exchange_days,
        repair_days: selected_obj.repair_days,
        recommend_price: selected_obj.recommend_price, // 推荐零售价
        max_price: selected_obj.max_price,
        min_price: selected_obj.min_price,
        limit_buy: selected_obj.limit_buy,
        explain: selected_obj.explain
      }
      this.order_list.push(new_obj)
    },
    change_bar_code (new_val) {
      if (this.order_list == null || this.order_list.length == 0){
        return
      }
      var counter = 0
      for (var var1 = 0; var1 < this.order_list.length; var1++) {
        if (this.order_list[var1].bar_code == new_val) counter += 1
      }
      if (counter >= 2) {
        var message = '商品码为：[' + new_val + ']的商品出现多次，请修正'
        alert(message)
      }
    },
    create_order: async function () {
      console.log('生成订单')
      // 下面进行判断
      if (this.order_list.length <= 0){
        alert("请勿提交空订单！")
        return
      }
      if (this.select_pay_method == '' ||
        this.selected_factory == '' ||
        this.select_warehouse == ''){
        alert("请完善订单头信息！")
        return
      }
      // 下面进行检查
      for (var i = 0; i< this.order_list.length;i++) {
        var item = this.order_list[i]
        if (item.brand == null || item.brand == ""){alert("第"+item.index+"行货物品牌为空！请完善");return ;}
        if (item.commodity == null || item.commodity == ""){alert("第"+item.index+"行商品名品牌为空！请完善");return ;}
        if (item.bar_code == null || item.bar_code == ""){alert("第"+item.index+"行商品码为空！请完善");return ;}
        if (item.unit_price == null || item.unit_price == ""){alert("第"+item.index+"行单价为空！请完善");return ;}
        if (item.recommend_price == null || item.recommend_price == ""){alert("第"+item.index+"行推荐零售价为空！请完善");return ;}
      }

      var data = {
        orders: this.order_list, // 订单列表
        needPrint: (this.need_print.length > 0), // 是否打印
        factory: this.selected_factory, // 厂家
        warehouse: this.select_warehouse, // 进货仓库
        payMethod: this.select_pay_method // 支付方式
      }
      console.log(data)
      if (!confirm("提交订单?")){return }
      let result = await orderService.create(data)
      if (result.data == null){
        alert("网络错误")
      }else if (result.data.status == 1){
        // 成功
        alert("订单创建成功！")
        if (this.need_print.length > 0){
          if (confirm("订单文件已生成，是否接受?")){
            // let result = await orderService.getWord(result.data.orderNumber)
            window.open("localhost:8000/api/order/word/" + result.data.orderNumber)
          }
        }
        this.order_list = []
        this.select_warehouse = ''
        this.selected_factory = ''
        this.select_pay_method = ''
        this.need_print = []
      }

      console.log(result)
    }
  },
  computed: {
    total_price: function () {
      var sum = 0
      this.order_list.forEach(function (item, index, array) {
        sum += (array[index].count * array[index].unit_price)
      })
      return sum
    }
  }
}
</script>
<style>
  .main{
    height: 100%;
    width: 100%;
    background: white;
    z-index: 1;
  }
  .table_head{
    width: 100%;
    height: 150px;
    /*background-color: black;*/
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0px 5px 5px #888888;
  }
  .table_items{
    width: 100%;
    min-width: 1280px;
    height: calc(100% - 250px);
    /*background-color: #9d6ae8;*/
    position: relative;
    overflow: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  }
  .teable_head_item{
    background: white;
    width: 50%;
    height: 50%;
    display: flex;
  }
  .table_items_rows{
    overflow-x: auto;
  }
  .table_items_row{
    display: flex;
  }
  .table_items_row_col{
    width: 80px;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
    justify-items: center;
  }
  .big_col{
    width: 180px;
  }
  .small_col{
    width: 40px;
  }
  .order_input{
    width: 100%;
    height: 100%;
    background-color: transparent;
    text-align: center;
  }
  .table_items_row_col_add {
    height: 100%;
    width: 10px;
  }
  .table_items_row_col_reduce {
    height: 100%;
    width: 10px;
  }

  .table_bottom {
    width: 100%;
    height: 100px;
    /*background: #02a4ed;*/
    display: flex;
justify-content: center  }

  .table_bottom_summary {
    width: 1280px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px -5px 5px #888888;

  }

  .table_bottom_summary_left {
    margin-left: 10px;
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .table_bottom_summary_right {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .table_bottom_summary_right_top {
    padding-top: 5%;
    height: 50%;
    width: 100%;
  }

  .table_bottom_summary_right_bottom {
    padding-right: 10%;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  #build_order_buttom {
    margin-right: 5px;
    width: 70px;
    height: 30px;
    border: black 1px solid;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .table_head_label {
    width: 150px;
    height: 100%;
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  select {
    display: block;
    width: 300px;
    position: relative;
    vertical-align: middle;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    color: #555;
    border: 1px solid #aaa;
    text-shadow: none;
    border-radius: 4px;
    transition: box-shadow 0.25s ease;
    z-index: 2;
  }

  .select_factory {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .select_warehouse {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .order_remove {
    margin-left: 5px;
    width: 100%;
    height: 100%;
    border: black 1px solid;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search_screen {
    position: absolute;
    width: 800px;
    height: 500px;
    background: #e7e1cd;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 15px;
    z-index: 999;
    margin-left: calc( 50% - 400px);
    margin-top: 100px;
    display: flex;
    flex-direction: column;
  }

  .search_screen_exit {
    width: 30px;
    height: 30px;
  }

  .search_screen_exit_buttom {
    padding-top: 5px;
    padding-right: 5px;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    font-size: 30px;
    /*background: red;*/
  }

  .search_screen_bar {
    width: 100%;
    height: 30px;
    /*background: #02a4ed;*/
    border-radius: 15px;
    display: flex;
justify-content: flex-end }

  .search_screen_body {
    width: 100%;
    height: 400px;
    /*background: #5ecc49;*/
    overflow-y: auto;
  }

  .search_screen_bottom {
    width: 100%;
    height: 70px;
    border-radius: 0 0 15px 15px;
    /*background: #60c1f6;*/
  }

  .search_screen_results {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .search_screen_result {
    height: 30px;
    display: flex;
  }

  .search_screen_result_col {
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .select_commodity {
    width: 30px;
    height: 20px;
    border-radius: 5px;
    border: 1px black solid;
  }

  .add_line {
    margin-top: 20px;
  }
</style>
